<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--根元素只能有一个入口组件，其他组件挂载到入口组件下面-->
			<App />
		</div>
		<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let Header = {
				template: '<div>{{name}}</div>',
				data(){
					return {
						name: '头部组件信息'
					}
				}
			}
			let Aside = {
				template: '<div>侧边栏</div>',
				data(){
					return {
						name: '侧边栏组件信息'
					}
				}
			}
			let Content = {
				template: '<div style="background: red;"><div>内容区</div><MostCom /></div>',
				data(){
					return {
						name: '内容组件信息'
					}
				}
			}
			//声明全局组件(在任何地方均可以使用)
			//参数1：组件名  参数2：组件选项options
			Vue.component('MostCom', {
				data() {
					return {
						name: '全局组件信息'
					}
				},
				template: '<div>{{name}}</div>'
			})
			//声明入口组件
			let App = {
				data(){
					return {
						name: '入口组件信息'
					}
				},
				template: `
				<div>
					<Header />
					<Aside />
					<Content />
					<MostCom />
				</div>`,
				components: {
					Header, Aside, Content
				},
				
			}
			let vm = new Vue({
				el: '#app',
				data(){
					return {
						value: 'vue实例的信息'
					}
				},
				//挂载子组件
				components: {
					App,
				},
			})
		</script>
	</body>
</html>
